<template>
  <div class="map-box">
    <div id="mapChart" class="chart"></div>
  </div>
</template>
<script>
import axios from "axios";
import { getMapCode } from "../../../util/mapCode.js";
import { getPolicyAtlas } from "../../../api/api.js";
export default {
  name: "mapChart",
  props: {
    // province: {
    //   type: String,
    //   default: ""
    // },
    // city: {
    //   type: String,
    //   default: ""
    // }
  },
  data() {
    return {
      mapCode: "",
      mapName: "",
      mapData: [],
      province: "",
      city: ""
    };
  },
  watch: {
    // city() {
    // this.getCode();
    // }
  },
  mounted() {
    // this.getCode();
  },
  methods: {
    getCode(province, city) {
      this.province = province;
      this.city = city;
      // this.mapCode = getMapCode(this.province, this.city);
      this.mapCode = getMapCode(province, city);
      this.mapChart();
    },
    mapChart() {
      // console.log(222222, this.mapCode);
      axios.get("mapJson/" + this.mapCode + ".json", {}).then(res => {
        // console.log(262626, res);
        const mapJson = res.data;
        let myChart = echarts.init(document.getElementById("mapChart"));
        this.getMapData(myChart, this.mapName, mapJson);
      });
    },
    registerAndsetOption(myChart, mapName, mapJson, arr) {
      // console.log(25252525, arr);
      echarts.registerMap(mapName, mapJson);
      myChart.setOption({
        tooltip: {
          trigger: "item"
        },
        //左侧小导航图标
        visualMap: {
          show: true,
          x: "left",
          left: 0,
          bottom: 10,
          splitList: [
            { start: 20000 },
            { start: 10000, end: 20000 },
            { start: 5000, end: 10000 },
            { start: 2000, end: 5000 },
            { start: 1000, end: 2000 },
            { start: 500, end: 1000 },
            { start: 200, end: 500 },
            { end: 200 }
          ],
          color: [
            "#3c55bb",
            "#0068ce",
            "#0f74d8",
            "#2489ec",
            "#44a2ff",
            "#98ccff",
            "#cee6ff",
            "#ecf6ff"
          ]
        },
        series: [
          {
            name: "政策数量",
            type: "map",
            map: mapName,
            zoom: 1,
            label: {
              show: true,
              fontSize: 12
            },
            itemStyle: {
              normal: {
                areaColor: "#fff",
                borderColor: "#000",
                borderWidth: 1
              }
            },
            data: arr //这个是我请求的数据
            // data: this.initMapData(mapJson) //这个也可以
          }
        ]
      });
    },
    getMapData(myChart, mapName, mapJson) {
      // console.log("------------------------");
      let params = {
        queryType: 0,
        province: "",
        city: this.city
      };
      getPolicyAtlas(params).then(res => {
        // console.log(6666, res);
        let arr = [];
        for (let i = 0; i < res.result.length; i++) {
          arr.push({
            name: res.result[i].area,
            value: res.result[i].policyTotal
          });
        }
        this.mapData = arr;
        this.registerAndsetOption(myChart, mapName, mapJson, arr);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.map-box {
  width: 60%;
  height: 600px;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>